<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{layouts/main}">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text_red {
            color: #FA0004;
        }
    </style>
</head>
<body>
<div layout:fragment="content" style="margin-left: 10%;margin-top: 20px">
    <form method="post" id="goodsForm" th:action="@{/goods/new}" th:object="${goods}">
        <input hidden th:field="*{id}">
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" th:field="*{name}" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="text" th:field="*{price}" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <label class="layui-form-label">商品介绍</label>
                <div class="layui-input-block">
                    <input type="text" th:field="*{remarks}" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <label class="layui-form-label">发布位置</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <!--省份选择-->
                        <select id="prov" name="houseProvince" onchange="showCity(this)" style="margin-bottom: 5px">
                            <option value="">=请选择省份=</option>
                        </select>

                        <!--城市选择-->
                        <select id="city" name="houseCity" onchange="showCountry(this)" style="margin-bottom: 5px">
                            <option value="">=请选择城市=</option>
                        </select>

                        <!--县区选择-->
                        <select id="country" name="houseDistrict" onchange="selecCountry(this)" style="margin-bottom: 5px">
                            <option value="">=请选择县区=</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <img id="image" style="padding-bottom: 5px" width="120px" height="100px" th:src="'http://qpmz3m7m0.hd-bkt.clouddn.com/'+${goods.photo}">
                        <input type="hidden" name="photo" id="photo">
                        <input type="file" name="file" id="file"/>
                        <button style="margin-top: 5px" type="button" class="layui-btn layui-btn-sm" onclick="upload()">上传</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" th:if="${not #strings.isEmpty(goods.id)}">修改</button>
                    <button type="submit" class="layui-btn" th:if="${#strings.isEmpty(goods.id)}">新增</button>
                    <button type="button" class="layui-btn" onclick="layer_close()">关闭</button>
                </div>
            </div>
        </div>
    </div>
    </form>
</div>
</body>
<th:block layout:fragment="pageScripts">
    <script th:src="@{/customize/js/city.js}"></script>
    <script th:src="@{/customize/js/method.js}"></script>
    <script th:inline="javascript">
        function upload() {
            var files = $('#file').prop('files');
            var data = new FormData();
            data.append('file', files[0]);
            $.ajax({
                url:/*[[@{/goods/uploadPic}]]*/'',
                data:data,
                type: 'post',
                cache: false,
                processData: false,
                contentType: false,
                success:function (result) {
                    if (result.state=='200'){
                        layer.alert('上传成功');
                        $("#photo").val(result.data);
                        $("#image").attr('src','http://qpmz3m7m0.hd-bkt.clouddn.com/'+result.data)
                    }
                }
            })
        }
        $('form').validate({
            submitHandler: function(){
                $.ajax({
                    type: "POST",
                    url: $('form').attr('action'),
                    data: $('form').serialize(),
                    success: function (result) {
                        layer.alert(result.msg, {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        }, function(){parent.window.location.reload();})
                    }
                });
            },
            errorClass:'text_red',
            rules:{
                remarks:{
                    required: true,
                    maxlength: 100
                },
                price:{
                    required: true,
                    maxlength: 15
                },
                name:{
                    required: true,
                    maxlength: 25
                }
            }
        })
    </script>
</th:block>
</html>